<template>
  <div class="breadcrumb">
    <el-scrollbar ref="scroll" @wheel.native.prevent="changeScroll">
      <transition-group name="breadcrumb">
        <span
          v-for="item in breadcrumbList"
          :key="item.path"
          @click="Toroute(item.path, item.name)"
          class="routelink"
          :class="{ active: isShow(item.name) }"
        >
          {{ item.meta.title }}
          <i
            v-if="item.name !== 'dashboard'"
            class="el-icon-close"
            @click="remove(item.name)"
          ></i>
        </span>
      </transition-group>
    </el-scrollbar>
  </div>
</template>

<script>
export default {
  name: 'BreaDcrumb',
  data () {
    return {
      // 存放已经点击的路由页面
      breadcrumbList: []
    }
  },
  created () {
    this.getBreadcrumb()
  },
  methods: {
    changeScroll (e) {
      const wrap = this.$refs.scroll.$refs.wrap
      wrap.scrollLeft = wrap.scrollLeft - e.wheelDelta
    },
    getBreadcrumb () {
      const route = this.$route
      // 判断跳转的路由是否存在
      const add = this.breadcrumbList.some(
        item =>
          item.name.trim().toLocaleLowerCase() ===
          route.name.toLocaleLowerCase()
      )
      // 如果不存在添加当前路由信息
      if (!add) {
        this.breadcrumbList.push({
          name: route.name,
          meta: route.meta,
          path: route.path
        })
      }
      // 取出最外层去判断是不是dashboard
      // 如果不是手动添加一个dashboard，因为无论如何都要有首页
      if (!this.isDashboard(route)) {
        this.breadcrumbList.unshift({
          name: 'dashboard',
          path: '/dashboard',
          meta: { title: '工作台' }
        })
      }
    },
    // 判断是否是dashboard
    isDashboard (route) {
      // 根据路由里面的name去判断
      const name = route && route.name
      if (!name) return false
      return this.breadcrumbList.find(
        item =>
          item.name.trim().toLocaleLowerCase() ===
          'Dashboard'.toLocaleLowerCase()
      )
    },
    // 判断样式
    isShow (name) {
      if (
        this.$route.name.trim().toLocaleLowerCase() === name.toLocaleLowerCase()
      ) {
        return true
      }
      return false
    },
    // 跳转路由
    Toroute (path, name) {
      if (this.isShow(name)) {
        return false
      }
      this.$router.push(path)
    },
    // 删除
    remove (name) {
      this.breadcrumbList = this.breadcrumbList.filter(
        item =>
          item.name.trim().toLocaleLowerCase() !== name.toLocaleLowerCase()
      )
      const i = this.breadcrumbList.length - 1
      if (!this.isShow(name)) return false
      this.$router.push(this.breadcrumbList[i].path)
    }
  },
  watch: {
    $route: {
      deep: true,
      handler (val) {
        if (this.breadcrumbList.find(item => item.name === val.name)) {
          return false
        }
        this.getBreadcrumb()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.el-scrollbar{
  white-space: nowrap;
  ::v-deep .el-scrollbar__wrap{
    overflow: hidden;
  }
}
  .active {
    color: #ffb200 !important;
  }
  .breadcrumb {
    height: 100%;
    width: calc(100% - 80px);
    padding: 0 20px;
    .el-scrollbar {
      height: 100%;
      ::v-deep .el-scrollbar__view {
        height: 100%;
        line-height: 64px;
        .routelink {
          padding: 8px 12px;
          background-color: #fff;
          color: #b5abab;
          border-radius: 4px;
          margin-right: 10px;
          cursor: pointer;
          i {
            color: #b5abab;
            padding: 2px;
            font-size: 12px;
            margin-bottom: 2px;
            vertical-align: middle;
            border-radius: 50%;
            &:hover {
              transition: all 0.3s;
              background-color: #ffb200;
              color: #fff;
            }
          }
        }
      }
    }
  }
</style>
